<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Editar Región</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/spacelab.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/responsive.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/misestilos.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/menu_jquery.css" %}">
    </head>
    <body>

        {% include "topmenu.html" %} <!-- Top menu -->

        <div class="container">
            <div class="row-fluid">

                {% include "sidebar.html" %} <!-- Side bar -->
                <div class="span9">
                    {% if show_message_success %}
                        <div class="alert alert-success">
                            <button type="button" class="close" data-dismiss="alert">
                                &times;
                            </button>
                            {{mensaje_exito|safe}}

                        </div>
                    {% endif %}
                    {% if show_message_error %}
                        <div class="alert alert-error">
                            <button type="button" class="close" data-dismiss="alert">
                                &times;
                            </button>
                            {{mensaje_error|safe}}
                        </div>
                    {% endif %}
                    <!-- Regiones -->
                    <div class="page-header">
                        <h1>Editar Región</h1>
                    </div>
                    <small><b>Campos con (*) son de caracter obligatorio para el registro.</b></small>

                    <form action="/plataforma/universidades/edicion_region/" method="post" name="registro" id="registro">
                        <div class="form-horizontall well">
                            <div class="control-group"><!-- Nombre -->
                                <label for="name" class="control-label"><b>Nombre*</b></label>
                                <div class="controls">
                                    <input type="text" name="nameRegion" id = "nameRegion" value="{{region_nombre}}" disabled  class="textarea_agregar_region">
                                <input type="hidden" name="name" id = "name">
                                    <div class="nameAlert"></div>
                                </div>
                            </div><!-- Nombre -->

                            <div class="control-group"><!-- Administrador -->
                                <label for="administrador" class="control-label"><b>Administrador</b></label>
                                <div class="controls">
                                    <select name="administrador" id = "administrador" class="selectarea_editar_region">
                                        {% for id_user, nombre_user in usuarios %}
                                            {% if id_user == idadministrador %}
                                                <option selected value="{{id_user}}">{{nombre_user}}</option>
                                            {%else%}
                                                <option value="{{id_user}}">{{nombre_user}}</option>
                                            {% endif %}
                                        {%endfor%}
                                    </select>
                                </div>
                                {% csrf_token %}
                            </div><!-- Administrador -->
                            
                            <div class="control-group">
                                <!-- Pais -->
                                <label for="pais" class="control-label"><b>País*</b></label>
                                <div class="controls">
                                    <select name="pais" id = "pais" onBlur="javascript:message_paises(event)" onclick="cargarNombreRegion()" class="selectarea_agregar_pais_region">
                                        <option selected value="{{ pais_selected_codigo }}">{{ region_nombre }}</option>
                                        {% for nombre, codigo in lista_sinc_paises %}
                                            <option value="{{ nombre }}">{{ codigo }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="paisAlert"></div>
                                </div>
                            </div><!-- /Pais -->

                            <div class="control-group"><!-- ID -->
                                <div class="controls">
                                    <input type="hidden" name="id" id = "id" value="{{identificador}}">
                                </div>
                            </div><!-- ID -->
                            
                            <div class="form-actions" align="center">
                                <hr>
                                <button type="submit" class="btn btn-primary" onClick="javascript:myfunc(event)">Guardar</button>
                            </div><!-- Botones de opciones -->
                        </div>
                    </form><!-- form -->
                </div>
            </div><!-- /row -->

            {% include "footer.html" %} <!-- Footer -->
        </div><!-- /container -->

        <!-- JS files -->
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/bootstrap.js" %}"></script>
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/menu_jquery.js" %}"></script>

        <script type="text/javascript">
            function myfunc(event) {
                if ($("#pais").val() == "") {
                    $(".paisAlert").html("<div class='alert alert-error'>Seleccione un país.</div>");
                    event.preventDefault();
                }else if ($("#administrador").val() == "" ){
                    $(".adminAlert").html("<div class='alert alert-error'>Seleccione un administrador para la región. Si no existe, debe crearlo.</div>");
                    event.preventDefault();
                }else {
                    cargarNombreRegion();
                    $("#registro").attr("action", "/plataforma/universidades/edicion_region/" + $("#id").val() + "/" + $("#administrador").val() + "/");
                    $("#registro").submit();
                }
            }

            //***********************
           /* $("#name").blur(function() {
                if ($("#name").val() != "") {
                    $(".nameAlert").html("");
                }else{
                    $(".nameAlert").html("<div class='alert alert-error'>Ingrese un nombre para la universidad.</div>");
                }
            });*/

            //***********************
            function cargarNombreRegion(){
                var valor = $("#pais option:selected").html();
                if (valor == "| Elije un país |"){
                    $("#nameRegion").val("");
                    $("#name").val("");
                }else{
                    $("#nameRegion").val(valor);
                    $("#name").val(valor);
                } 
            }

            function message_paises() {
                if ($("#pais").val() == "") {
                    $(".paisAlert").html("<div class='alert alert-error'>Seleccione un país.</div>");
                } else {
                    $(".paisAlert").html("");
                }
            }
        </script>
    </body>
</html>